<template>
  <view class="cash-form">
    <view class="tip">
      <view class="title">操作说明:</view>
      <view class="text">请输入两次相同新密码</view>
    </view>
    <u-line></u-line>
    <u--form
        labelPosition="left"
        :model="postForm"
        :rules="rules"
        ref="uForm"
        class="form"
        labelWidth="160rpx"
        labelAlign="right"
        :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
    >
      <!--<u-form-item label="旧密码:" prop="oldPassword" v-if="postForm.isExist">-->
      <!--  <u&#45;&#45;input-->
      <!--      v-model="postForm.oldPassword"-->
      <!--      type="password"-->
      <!--      border="surround"-->
      <!--      fontSize="24rpx"-->
      <!--      :customStyle="{'height': '30rpx'}"-->
      <!--  ></u&#45;&#45;input>-->
      <!--</u-form-item>-->
      <u-form-item label="新密码:" prop="password1">
        <u--input
            v-model="postForm.password1"
            type="password"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="重复密码:" prop="password2">
        <u--input
            v-model="postForm.password2"
            type="password"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
            color="red"
        ></u--input>
      </u-form-item>
      <u-form-item label="手机号:">
        <u--input
            v-model="postForm.mobile"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
            color="red"
        ></u--input>
      </u-form-item>
      <u-form-item label="验证码:">
        <u--input
            v-model="postForm.verify"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
            color="red"
        ></u--input>
      </u-form-item>
      <view class="code">
        <u-button size="small" type="primary" :text="verifyText" :disabled="verifySend" @click="getVerify"></u-button>
      </view>
      <u-button type="success" class="btn" :color="activeColor" @click="save" text="保存"></u-button>
    </u--form>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '../../util/base64'
import User from '../../api/user'
const userModel = new User()
const text = '获取验证码'
export default {
  data() {
    return {
      activeColor: color.main_color,
      rules: {
        // 'oldPassword': {
        //   type: 'string',
        //   required: true,
        //   message: '请输入旧密码',
        //   trigger: ['blur', 'change']
        // },
        'password1': {
          type: 'string',
          required: true,
          message: '请输入新密码',
          trigger: ['blur', 'change']
        },
        'password2': {
          type: 'string',
          required: true,
          message: '请输入重复密码',
          trigger: ['blur', 'change']
        }
      },
      postForm: {
        // isExist: false,
        // oldPassword: '',
        password1: '',
        password2: '',
        mobile: '',
        verify: '',
      },
      verifyText: text,
      verifySend: false,
    }
  },
  mounted() {
    // this.fetch()
  },
  methods: {
    getVerify() {
      if (this.verifySend) {
        return false
      }
      if (!this.postForm.mobile) {
        uni.showToast({
          icon: 'error',
          title: '请输入手机号码'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.postForm.mobile)) {
        uni.showToast({
          icon: 'error',
          title: '手机号码错误'
        })
        return false
      }
      userModel.getVerify({ mobile: this.postForm.mobile }).then(response => {
        let { data } = response
        data = base64.parse(data)
        const msg = (data.code && `验证码是:${data.code}`) || response.message
        const time = (data.code && 5000) || 2000
        this.verifySend = true
        this._timer(data.timeout * 60)
        uni.showToast({
          icon: 'none',
          time: time,
          title: msg
        })
      }).catch(e => {
        // uni.showToast({
        //   icon: 'none',
        //   title: e
        // })
      })
    },
    _timer(timeout) {
      setTimeout(() => {
        timeout--
        this.verifyText = `${timeout}秒后重新发送`
        if (timeout !== 0) {
          this._timer(timeout)
        } else {
          this.verifyText = text
          this.verifySend = false
        }
      }, 1000)
    },
    // fetch() {
    //   userModel.checkPayPassword().then(response => {
    //     let { data } = response
    //     data = base64.parse(data)
    //     console.log(data)
    //     this.postForm.isExist = data.result
    //   })
    // },
    save() {
      this.$refs.uForm.validate().then(res => {
        console.log(res)
        if (res) {
          if (this.postForm.password1 !== this.postForm.password2) {
            return uni.showToast({
              icon: 'none',
              title: '两次输入密码不同!'
            })
          }
          userModel.checkVerify({
            mobile: this.postForm.mobile,
            code: this.postForm.verify
          }).then(() => {
            userModel.payForget({
              ...this.postForm
            }).then(() => {
              this.$refs.uToast.show({
                type: 'success',
                message: '操作成功',
                duration: 800,
                iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
                complete: () => {
                  // uni.navigateBack()
                  uni.switchTab({
                    url: '/pages/center/index'
                  })
                }
              })
            })
          })
        }
      }).catch(e => {
      })

    }
  }
}
</script>

<style scoped lang="scss">
.code {
  padding: 0 300rpx 0 165rpx;
}
.cash-form {
  padding: 20px 10px;
  .tip {
    font-size: 24rpx;
    margin-bottom: 10px;
    view {
      height: 20px;
    }
    .title {
      font-weight: 700;
    }
  }
  .form {
    padding-top: 10px;
    .btn {
      margin-top: 10px;
    }
  }
}
</style>
